<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标滑动悬停效果</title>
    <link rel="stylesheet" href="./鼠标滑动悬停效果.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
    <ul>
        <li>
            <div class="icon">
                <a href="">
                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                 <div class="text">Address</div>
                </a>
            </div>
        </li>
        <li>
            <div class="icon">
                <a href="">
                <i class="fa fa-address-card" aria-hidden="true"></i>
                <div class="text">Address</div>
            </a>
            </div>
        </li>
        <li>
            <div class="icon">
                <a href="">
                <i class="fa fa-binoculars" aria-hidden="true"></i>
                <div class="text">Address</div>
            </a>
            </div>
        </li>
        <li>
            <div class="icon">
                <a href="">
                <i class="fa fa-diamond" aria-hidden="true"></i>
                <div class="text">Address</div>
            </a>
            </div>
        </li>
    </ul>
</body>
</html>